<template>
  <view class="container">
    <!-- <view class="navbar">
      <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
        {{ item.text }}
      </view>
    </view> -->
    <u-sticky bgColor="#fff">
      <u-tabs :list="navList"  @change="tabClick" :current="tabCurrentIndex"></u-tabs>
    </u-sticky>
    <view class="middle">
      <view class="year-box flex">
        <view class="left" @click="last"><image src="/static/image/arrow_left.png" mode="widthFix" /></view>
        <view class="year">{{ year }}</view>
        <view class="right" @click="next"><image src="/static/image/arrow_right.png" mode="widthFix" /></view>
      </view>
      <view class="flex month-boxs">
        <view class="month-box" v-for="(item, index) in months" :key="index" @click="changemonth(item, index)">
          <view class="month" :class="{ blue: monthIndex === index }">{{ item.month }}</view>
        </view>
      </view>
      <view v-show="tabCurrentIndex === 0" class="tab_1">
        <view style="padding: 20rpx">
          <view class="content">
            <view class="title flex j-content-between" @click="mydetail">
              <view class="title-left">上下班统计</view>
              <view class="title-right"> <image src="/static/image/arrow_right.png" mode="widthFix" /></view>
            </view>
            <view class="flex wrap" style="justify-content: space-evenly">
              <view class="content-box">
                <view class="text-blue">{{ date.laterCount }}天</view>
                <view>迟到</view> </view
              ><view class="content-box">
                <view class="text-blue">{{ date.earlierCount }}天</view>
                <view>早退</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.missCount }}天</view>
                <view>缺卡</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.absentDaySum }}天</view>
                <view>异常天数</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.presentDaySum }}天</view>
                <view>正常天数</view>
              </view>
              <view class="content-box"></view>
              <view class="content-box"></view>
            </view>
          </view>
        </view>
        <view style="padding: 20rpx">
          <view class="content">
            <view class="title flex j-content-between">
              <view class="title-left">加班统计</view>
              <view class="title-right" />
            </view>
            <view class="flex wrap">
              <view class="content-box">
                <view class="text-blue">{{ date.overtimeHourSum }}小时</view>
                <view>加班时长</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.overtimeDaySum }}天</view>
                <view>加班天数</view>
              </view>
            </view>
          </view>
        </view>
        <view style="padding: 20rpx">
          <view class="content">
            <view class="title flex j-content-between">
              <view class="title-left">假勤统计</view>
              <!-- <view class="title-right"> <image src="/static/image/arrow_right.png" mode="widthFix" /></view> -->
            </view>
            <view class="flex wrap" style="justify-content: space-evenly">
              <view class="content-box">
                <view class="text-blue">{{ date.laterSignCount }}天</view>
                <view>补卡</view>
              </view>

              <view class="content-box">
                <view class="text-blue">{{ date.missionLeaveDaySum }}天</view>
                <view>公出</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.vacationLeaveDaySum }}天</view>
                <view>年假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.accidentLeaveDaySum }}天</view>
                <view>事假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.illLeaveDaySum }}天</view>
                <view>病假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.shiftLeaveDaySum }}天</view>
                <view>调休</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.marriageLeaveDaySum }}天</view>
                <view>婚假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.birthLeaveDaySum }}天</view>
                <view>产假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.withBirthLeaveDaySum }}天</view>
                <view>陪产假</view>
              </view>
              <view class="content-box">
                <view class="text-blue">{{ date.otherLeaveDaySum }}天</view>
                <view>其他</view>
              </view>
              <view class="content-box"></view>
              <view class="content-box"></view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="tabCurrentIndex === 1">
        <scroll-view :style="{ height: curScroll + 'px' }" :show-scrollbar="false" class="scroll-Y" @scrolltolower="scrolltolower" :scroll-top="scrollTop" enhanced scroll-y="true">
          <report @rowClick="rowclick" :dataList="datelist" :propList="propList" />
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { self, junior } from '@/service/api/attendance'
import report from '@/components/report'
import { debounce, getScreen } from '@/service/auth'
export default {
  components: { report },
  data() {
    return {
      tabCurrentIndex: 0,
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      navList: [{ name: '我的考勤' }, { name: '下属考勤' }],
      months: [
        { id: 1, month: '1月' },
        { id: 2, month: '2月' },
        { id: 3, month: '3月' },
        { id: 4, month: '4月' },
        { id: 5, month: '5月' },
        { id: 6, month: '6月' },
        { id: 7, month: '7月' },
        { id: 8, month: '8月' },
        { id: 9, month: '9月' },
        { id: 10, month: '10月' },
        { id: 11, month: '11月' },
        { id: 12, month: '12月' },
      ],
      monthIndex: new Date().getMonth(),
      date: {},
      datelist: [],
      propList: [
        { prop: 'userName', label: '姓名' },
        { prop: 'leaveDaySum', label: '请假天数' },
        { prop: 'overtimeDaySum', label: '加班天数' },
        { prop: 'presentDaySum', label: '出勤' },
      ],
      size: 999,
      page: 1,
      end: false,
      curScroll: 0,
      height: 0,
      myuserId: '',
    }
  },
  created() {
    const { height } = getScreen()
    this.curScroll = height - 179
    this.height = height
    this.getself()
  },
  methods: {
    tabClick(e) {
      this.tabCurrentIndex = e.index

      this.getself()
    },
    changemonth(item, i) {
      this.monthIndex = i
      this.month = item.id
      this.init()
      this.getself()
    },
    init() {
      ;(this.end = false), (this.page = 1), (this.datelist = [])
    },
    getself() {
   
      this.uniShowLoading()
      if (this.tabCurrentIndex === 0) {
        const data = {
        year: this.year,
        month: this.month,
        size: this.size,
        page: this.page,
        startYear: this.year,
        startMonth: this.month,
        endYear: this.year,
        endMonth: this.month,
      }
        self(data)
          .then(res => {
            this.uniHideLoading()
            this.date = res.data
            this.myuserId = res.data.userId
          })
          .catch(err => {
            this.uniHideLoading()
            uni.showToast({
              title: err.msg,
              icon: 'none',
            })
          })
      } else {
        const data = {
        year: this.year,
        month: this.month,
        size: this.size,
        page: this.page,
        startYear: this.year,
        startMonth: this.month,
        endYear: this.year,
        endMonth: this.month,
        range:'2'
      }
        junior(data)
          .then(res => {
            this.uniHideLoading()
            if (res.data.content.length < this.size) this.end = true
            this.datelist = res.data.content
          })
          .catch(err => {
            this.uniHideLoading()
            uni.showToast({
              title: err.msg,
              icon: 'none',
            })
          })
      }
    },
    last() {
      this.year--
      this.init()
      this.getself()
    },
    next() {
      this.year++
      this.init()
      this.getself()
    },
    rowclick(row) {
      uni.navigateTo({
        url: `/order/personnel/attendance/detail?userId=${row.userId}&year=${this.year}&month=${this.month}`,
      })
      console.log(row, 'ffffff')
    },
    scrolltolower() {
      console.log('---------------')
      if (this.end) return
      this.page++
      this.getself()
    },
    mydetail() {
      uni.navigateTo({
        url: `/pageAttendance/pages/attendance/attendanceRecord/mydetail?userId=${this.myuserId}&year=${this.year}&month=${this.month}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
/* .navbar {
  display: flex;
  height: 40px;
  padding: 0 5px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    &.current {
      color: #0596fd;
      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 100%;
        height: 0;
        border-bottom: 2px solid #0596fd;
      }
    }
  }
} */

.year-box {
  margin: 10rpx 0;
  .left {
    width: 33%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    image {
      width: 15rpx;
      height: 15rpx;
    }
 
  }
  .year {
    width: 33%;
    text-align: center;
  }
  .right {
    width: 33%;
    text-align: left;
    display: flex;
    align-items: center;
    image {
      width: 15rpx;
      height: 15rpx;
    }
  }
}
.month-boxs {
  overflow-x: auto;
  .month-box {
    flex-shrink: 0;
    width: 100rpx;
    padding: 20rpx 0;

    .month {
      font-size: 15px;
      width: 100rpx;
      height: 60rpx;

      text-align: center;
      line-height: 60rpx;
    }
    .blue {
      color: #2f6fef;
      /* border-bottom: 4rpx solid #2f6fef; */
    }
  }
}
.content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .content-box {
    width: 200rpx;
    text-align: center;
    margin: 10px 0;
  }
  .title-right {
    width: 15rpx;
    image {
      width: 15rpx;
      height: 15rpx;
    }
  }
  .text-blue {
    color: #2f6fef;
  }
}
.container {
  background-color: #f4f5f9;
  width: 100vw;
  position: relative;

  .middle {
    background-color: white;
    margin: 20rpx;
    border-radius: 10rpx;
    padding: 10rpx 0;
    .tab_1 {
      background: linear-gradient(to bottom, #7ab0eb, #2c6dff);
      border-radius: 20rpx;
    }
  }
}
</style>
